<template>
  <div class="register_container">
    <div class="registerBox">
      <div class="register-left">
        <div class="left-top">
          <div class="web-icon">
            <img src="../../assets/image/shopIconDemo.jpg" alt="" />
          </div>
        </div>
        <div class="left-center">
          <h3>LinZe!</h3>
          <span>灵感在空间里绽放，森林在城市里延深</span>
        </div>
        <div class="left-bottom">
          <h3>created by mr. web designer | all rights reserved!</h3>
        </div>
      </div>
      <div class="register-right">
        <div class="registerMainBox">
          <div class="registerMainBoxPart">
            <div class="boxTitle">
              <div class="left">
                <h3>账号注册页</h3>
                <span>请完善以下表单信息来完成注册</span>
              </div>
              <div class="right">
                <div class="iconBox">
                  <i class="iconfont icon-zhuce"></i>
                  <i class="suo iconfont icon-jiesuo_o"></i>
                </div>
              </div>
            </div>
            <div class="formBox">
              <el-form
                ref="registerFormRef"
                :model="registerForm"
                :rules="registerFormRules"
                class="demo-ruleForm"
                :size="formSize"
              >
                <el-form-item prop="name">
                  <el-input
                    v-model="registerForm.name"
                    placeholder="昵称"
                    clearable
                  />
                </el-form-item>
                <el-form-item prop="email">
                  <el-input
                    v-model="registerForm.email"
                    placeholder="电子邮箱"
                    clearable
                    style="width: 489px; maring-right: 10px"
                    @toggle="checkEmail"
                  >
                    <template #append
                      ><el-button @click="countDown" :disabled="canClick">{{
                        context
                      }}</el-button></template
                    ></el-input
                  >
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                    v-model="registerForm.password"
                    placeholder="密码"
                    clearable
                    type="password"
                    show-password
                  />
                </el-form-item>
                <el-form-item prop="checkPass">
                  <el-input
                    v-model="registerForm.checkPass"
                    placeholder="再次输入密码"
                    clearable
                    type="password"
                    show-password
                  />
                </el-form-item>
                <el-form-item prop="phone">
                  <el-input
                    v-model="registerForm.phone"
                    placeholder="手机"
                    clearable
                  />
                </el-form-item>
                <el-form-item prop="code">
                  <el-input
                    v-model="registerForm.code"
                    placeholder="邮箱验证码"
                    clearable
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm">注册</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { reg_tel_phone, reg_pwd } from "@/assets/js/regex";
import { checkEmail, postCode, register } from "@/api/user";
export default {
  data() {
    // 验证两次密码一至
    let checkPwd2 = (registerFormRules, value, callback) => {
      if (value.trim().length == 0) {
        callback(new Error("密码不能为空"));
      } else if (value != this.registerForm.password) {
        callback(new Error("2次密码不一致"));
      } else {
        callback();
      }
    };
    return {
      context: "发送验证码",
      totalTime: 60,
      canClick: false,
      registerForm: {
        name: "",
        phone: "",
        email: "",
        password: "",
        checkPass: "",
        code: "",
      },
      registerFormRules: {
        name: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱格式" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符",
            trigger: "change",
          },
          {
            pattern: reg_pwd,
            message: "密码需要同时使用数字与字母组合",
            trigger: "blur",
          },
        ],
        checkPass: [{ validator: checkPwd2, trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern: reg_tel_phone,
            message: "请输正确的手机号码格式",
            trigger: "blur",
          },
        ],
        code: [{ required: true, message: "验证码为必填项", trigger: "blur" }],
      },
    };
  },
  methods: {
    returnForm() {
      // 返回register界面
      this.$router.push("/register");
    },
    // 发送验证码
    countDown() {
      this.postCode();
      this.canClick = true;
      this.context = this.totalTime + "秒后重选发送";
      const timer = setInterval(() => {
        this.totalTime--;
        this.context = this.totalTime + "秒后重新发送";
        if (this.totalTime < 0) {
          clearInterval(timer);
          this.context = "重新发送";
          this.totalTime = 60;
          this.canClick = false;
        }
      }, 1000);
    },
    submitForm() {
      register(this.registerForm).then((res) => {
        console.log(res);
        if (res.code != 0) {
          this.$message.error("注册失败" + res.msg);
        } else {
          this.$message.success("注册完成");
          this.$router.push("/login");
        }
      });
    },
    checkEmail() {
      let email = this.registerForm.email;
      console.log(this.registerForm);
      if (email !== "" && !email && email !== "undefined") {
        checkEmail(email).then((res) => {
          console.log(res);
        });
      }
    },
    postCode() {
      let email = this.registerForm.email;
      if (email !== "" && email && email !== "undefined") {
        postCode(email).then((res) => {
          console.log(res);
        });
      }
    },
  },
};
</script>
<style lang="scss">
.register_container {
  height: 100%;
  background-color: #fff;
  .registerBox {
    max-width: none;
    min-height: 100vh;
    padding-top: 0;
    width: 100%;
    height: auto;
    padding-left: 0;
    padding-right: 0;
    display: -webkit-flex;
    display: flex;
    box-sizing: content-box;
    .register-left {
      width: 38%;
      background-color: #244d4d;
      .left-top {
        height: 80px;
        width: 100%;
        display: flex;
        align-items: center;
        padding-left: 30px;
        .web-icon {
          height: 33px;
          width: 80px;
          img {
            height: 100%;
            width: 100%;
          }
        }
      }
      .left-center {
        height: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #fff;
        font-weight: 700;
        font-size: 30px;
        h3 {
          margin-bottom: 20px;
          color: #ffdb00;
        }
      }
      .left-bottom {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        color: #fff;
        font-size: 20px;
        height: 10%;
      }
    }
    .register-right {
      width: 62%;
      height: 100%;
      overflow: hidden;
      .registerMainBox {
        display: flex;
        flex-direction: column;
        .registerMainBoxPart {
          height: 100%;
          width: 100%;
          padding: 15% 40% 10% 17%;
          .boxTitle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left {
              h3 {
                font-size: 26px;
                color: #111;
                font-weight: 400;
              }
              span {
                display: flex;
                margin-top: 10px;
                font-size: 19px;
                color: #484848;
              }
            }
            .right {
              margin-left: 30px;
              display: flex;
              position: relative;
              i {
                font-size: 70px;
              }
              .suo {
                position: absolute;
                top: 15px;
                right: -10px;
                font-size: 28px;
                font-weight: 700;
              }
            }
          }
          .formBox {
            .el-form {
              .el-form-item {
                height: 70px;
                .el-input__wrapper {
                  border: 0;
                  border-radius: 0;
                  width: 100%;
                  border-bottom: 1px solid #244d4d;
                  box-shadow: 0 0 0 0;
                  color: #111;
                  font: normal;
                  font-family: "Courier New", Courier, monospace;
                  text-transform: none;
                }
                .el-input-group__append {
                  box-shadow: 0 0 0 0;
                  background-color: #fff;
                  padding: 0;
                  .el-button {
                    padding: 0;
                    margin: 0;
                    border-radius: 0;
                    border-bottom: 1px solid #244d4d;
                    background-color: #244d4d;
                    color: #fff;
                    width: 100px;
                    font-size: 12px;
                    height: 32px;
                    cursor: pointer;
                    &:hover {
                      font-weight: 700;
                    }
                  }
                }
                .el-button {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 100%;
                  background-color: #244d4d;
                  color: #fff;
                  font-weight: 700;
                  font-size: 16px;
                  height: 56px;
                  border-radius: 30px;
                }
              }
            }
          }
          .forgetPwd {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            color: #666;
            span {
              cursor: pointer;
              &:hover {
                font-weight: 700;
              }
            }
            a {
              border-bottom: 1px solid #666;
              cursor: pointer;
            }
          }
          .fotterBox {
            display: flex;
            flex-direction: column;
            margin-top: 60px;
            color: #666;
            font-size: 14px;
            .btnbox {
              display: flex;
              .reBtnBox {
                width: 70px;
                margin-top: 40px;
                align-items: center;
                display: flex;
                flex-direction: column;
                .registerBtn {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  height: 50px;
                  width: 50px;
                  border-radius: 50%;
                  border: 1px solid #244d4d;
                  &:hover {
                    background-color: #244d4d;
                    color: #fff;
                  }
                  i {
                    font-size: 20px;
                    font-weight: 500;
                  }
                }
                span {
                  display: flex;
                  cursor: pointer;
                  &:hover {
                    border-bottom: 1px solid #ddd;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
